<template>
  <div>
    <van-pull-refresh style="min-height: 100vh;" v-model="loading" @refresh="onRefresh" success-text="刷新成功" :disabled="false">
      <p>刷新次数: {{ count }}</p>
      <br>
      <br>
      本页演示下拉刷新
      <br>
      系统会陆续更新一些实用功能
    </van-pull-refresh>
  </div>

<van-button round type="primary" size="small" @click="csLog">点击重试</van-button> 
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Toast } from 'vant';

const count = ref(0);
const loading = ref(false);

const logFunc = (count: number) => {
  console.log('测试=============', count);
}
const onRefresh = () => {
  setTimeout(() => {
    Toast('刷新成功');
    loading.value = false;
    count.value++;
  }, 1000);
};

let p = new Promise((resolve, reject) => {
  //做一些异步操作
  setTimeout(function () {
    var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
    if (num <= 5) {
      resolve(num);
    }
    else {
      reject('数字太大了');
    }
  }, 2000);
});


p.then((data) => {
  console.log('resolved', data);
}, (err) => {
  console.log('rejected', err);
}
);

const csLog = () => {
  for (let index = 1; index <= 3; index++) { 
    const timer = setInterval(logFunc, 5000, index); 
    setTimeout(() => {
      clearInterval(timer);
    }, 5100);
    console.log('测试=====清除========', index);
  }

  // var timer = setInterval(logFunc,1000,count--);
  // console.log('timer==========',timer); 
  // clearInterval(timer);
}


onMounted(() => {

  console.log('tabl3=======onMounted==>');
})
</script>
  
<style lang="scss" scoped>
.container {
  overflow: auto;
  touch-action: none;
  margin: 5px 10px;
  background-color: #eee;
  height: 100%;
  min-height: 200px;

  &-item {
    padding: 7px 0px;
  }

  &-btn {
    padding: 7px 10px;
  }
}
</style>